<template>
    <div class="student-container student-stories-wrap student-essay-wrap stories-detail-wrap">
    <div  class="stories-item">
        <h3>{{storyDetail.title}}</h3>
        <div class="stories-list__info">
            <img class="portrait" :src="storyDetail.publisher_headimgurl">
            <div class="info-detail">
               <strong class="nickname">{{storyDetail.publisher_nick_name}}</strong><br/>
               <!-- <span class="time">1小时前</span> -->
            </div>
         </div>
         <div class="story-content" v-html="storyDetail.content">
         </div>
         <div class="button-tools" v-if="storyDetail.is_mine">
            <button @click="editStory">编辑</button>
            <button class="remove-btn" @click="removeStory()">删除</button>
         </div>
         <div class="edit-info clearfix">
            <span class="pull-left"><i class="icon-like" :class="{'is-liked':storyDetail.is_praise}" @click="praise"></i> {{storyDetail.praise_count}}</span>
            <span>著作权归作者所有</span>
         </div>
    </div>
</div>
</template>

<script>
import jskit from "../assets/jskit";
import {STORY_DETAIL,STORY_PRAISE,STORY_PRAISE_CANCEL,STORY_DELETE} from '../api';
import utils from '../utils';

export default {
    data(){
        return{
              storyDetail:{},
              storyid:jskit.utils.getUrlObj().id
        }
    },
    methods:{
       getStoryDetail(){
             this.$http.get({
                 url:STORY_DETAIL,
                 data:{
                     story_id:this.storyid
                 }
             }).then((response)=>{
                 var result = response.data;
                 if (result.code === '0') {
                     this.storyDetail = result.data;
                 }
                 else{
                     this.$toast.show(result.message)
                 }
             })
       },
       praise(){
        if(this.storyDetail.is_praise){
            return;
        }
        let url = !this.storyDetail.is_praise ? STORY_PRAISE : STORY_PRAISE_CANCEL;
        this.$http.get(url,{
            story_id:this.storyid
        })
        .then(res => {
            var result = res.data;
            if (result.code === '0') {
                this.storyDetail.praise_count ++;
                this.storyDetail.is_praise = !this.storyDetail.is_praise;
            }
            else{
                this.$toast.show(result.message)
            }
        })
       },
       filterHtml:utils.filterHtml,
       removeStory(){
            if(confirm("你确定删除吗？")){
                this.$http.get(STORY_DELETE,{
                    story_id:this.storyid
                })
                .then(res => {
                    var result = res.data;
                    if (result.code === '0') {
                        this.$toast.show("删除成功");
                        setTimeout(()=>{
                            location.href = "/stories"
                        },300)
                    }
                    else{
                        this.$toast.show(result.message)
                    }
                })
            }
       },
       editStory(){
        location.href="/mine/writing?id="+this.storyid
       }
    },
    ready(){
        this.getStoryDetail();
    }
}
</script>
<style lang="sass">
  @import "../sass/stories.scss";

  .button-tools{
    text-align:center;
    .remove-btn{
        margin-left:$rem*50;
    }
  }
  button{
    width: $rem*130;
    height: $rem*60;
    background-color:#C52B3E;
    border-radius: $rem*10;
    margin-bottom: $rem*100;
    font-size: $rem*24;
    margin-top: $rem*100;
    color: #fff;
    border: none;
    padding: 0 $rem*20;

}
</style>
